<template>
    <div>

        <el-row :gutter="20" style="margin: 20px;" v-for="(item, index) in outstandingVolunteerList" :key="index">
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content"
                    style="height: 100px;">
                    <div style="display: flex;padding: 10px; margin: 20px; background-color: #fff; box-shadow: -3px 3px 3px -2px rgba(0,0,0,0.1), 3px 3px 3px -2px rgba(0,0,0,0.1); "
                        >
                        <div style="flex:0.1;margin-right: 10px;">
                            <img :src="item.img" alt=""
                                style="width: 100px; height: 100px;  border-radius: 5px 5px 0 0;">
                        </div>

                        <div style="flex:0.4;">
                            <div style="margin: 2px;"> 用户名： {{ item.userName }}</div>
                            <div style="margin: 2px;"> 电话号码： {{ item.phone }}</div>
                            <div style="margin: 2px;"> 性别：{{ item.sex==0?'女':'男' }}</div>
                            <div style="margin: 2px;"> 服务时长：{{ item.serviceDuration }} 小时</div>
                            <div>
                                <el-tag v-if="item.evaluate == '优秀'" size="mini" type="success">{{item.evaluate}}</el-tag>
                                <el-tag v-if="item.evaluate == '良好'" size="mini" type="warning">{{ item.evaluate }}</el-tag>
                            </div>
                        </div>
                        <div >
                            <div style="margin-bottom: 10px;">报名的活动类型:</div>
                            <div v-for="(item1, index) in item.categoryList" :key="index" style="margin-left: 15px;">{{ item1.typeName }}</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>

        <div style="margin: 10px 0" v-if="total">
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="pageSize"
                layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import { getOutstandingVolunteerService } from "@/api/front/common";
export default {
    name: "login",
    components: {
    },
    data() {
        return {
            outstandingVolunteerList: [],
            queryForm: {
                page: 1,
                pageSize:10,
            },
        };
    },
    mounted() {
        this.getOutstandingVolunteerList(this.queryForm);
    },
    methods: {
        getOutstandingVolunteerList(queryForm) {
            getOutstandingVolunteerService(queryForm).then(resp => {
                if (!resp) return;
                this.outstandingVolunteerList = resp.data.data;
                // this.outstandingVolunteerList = res.data;
            console.log('res', resp);
            }, error => {
                console.log(error);
            })
        },

        detailActivity(id) {

            this.$router.push('/front/activityDetail?id=' + id)
        }
    },
};
</script>

<style lang="scss">
.grid-content {
    min-height: 36px;
}

.bg-purple {
    // background: #000;
    background: #F6F6F6;
}
</style>